/*
 * @Description: 档案日志管理类型导航
 * @Author: Rfan
 * @Date: 2022-09-19 14:08:51
 * @LastEditTime: 2022-09-19 17:48:28
 */

import { useEffect, useState } from 'react';
import { Menu, Typography } from 'antd';
import { AppstoreFilled } from '@ant-design/icons';
import classnames from 'classnames/bind';
import { useLogContext } from '../contexts/LogContext';
import type { SelectInfo } from 'rc-menu/lib/interface';
import styles from '../styles/logNav.module.scss';
import { ItemType } from 'antd/lib/menu/hooks/useItems';

const cx = classnames.bind(styles);

interface ISidebarTypeProps {
  title: string;
  type: string;
  items: ItemType[];
}

const SidebarType = (props: ISidebarTypeProps) => {
  const { title, type, items } = props;
  const { logType, selectLogNav, setLogType, setSelectLogClass } = useLogContext();
  const [openKey, setOpenKey] = useState('3');

  useEffect(() => {
    if (type === 'business') {
      if (logType !== 'business') {
        setOpenKey('');
        setSelectLogClass('');
      }
    }
  }, [logType]);

  /**
   * @description: 切换主菜单
   * @param {string[]} openKeys 点击条目信息
   */
  const changeSub = (openKeys: string[]) => {
    setOpenKey(openKeys[1]);
  };

  // /**
  //  * @description: 切换日志类型
  //  * @param {SelectInfo} param 点击条目信息
  //  */
  const changeNav = ({ key, keyPath }: SelectInfo) => {
    console.log(key, keyPath);
    if (type === 'business') {
      logType !== 'business' && setLogType('business');
      setSelectLogClass(parseInt(key, 10));
      if (keyPath[1] !== openKey) {
        setOpenKey(keyPath[1]);
      }
    } else if (type === 'operate') {
      logType !== 'operate' && setLogType('operate');
    }
  };

  return (
    <div className="nav-class">
      <Typography.Title className={cx('log-nav-title')} level={5}>
        <AppstoreFilled /> {title}
      </Typography.Title>
      <Menu
        mode="inline"
        items={items}
        openKeys={[`${openKey}`]}
        selectedKeys={[`${selectLogNav}`]}
        onSelect={changeNav}
        onOpenChange={changeSub}
      />
    </div>
  );
};

export default SidebarType;
